<script setup lang="ts">

</script>

<template>
<div class="wrapper">
  <div class="section">
    <h2>what to Read Next</h2>
    <a href="#" class="link">Browse the whole series</a>
    <ul class="cards">
      <!--项目高度由内容撑高-->
      <li class="card">
        <h3 class="card__title">
          <a href="">3 Popular Website Heroes Created With CSS Grid Layout</a>
        </h3>
        <p class="card__describe">This episode explores creating website heroes - aka 'headers' - by using CSS grid and a unique way to apply grid template areas that you can use to replace older methods that used absolute positioning.</p>
        <a href="#" class="card__button">Read More</a>
        <span class="card__episode">16</span>
      </li>
      <li class="card">

      </li>
      <li class="card">

      </li>
      <li class="card">

      </li>
    </ul>

  </div>
</div>
</template>

<style scoped lang="scss">
.wrapper {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  background-color: #557;
  color: #c5c5ce;
  display: grid;
  gap: 1rem;
  padding: 2rem 2rem 4rem;

  .section {
    display: inherit;
    justify-items: center;
    gap: 1rem;
    border-image: linear-gradient(
      to right,
      #d367c1 10%,
      #dedf40 25%,
      #62cb5c 50%,
      #00bbcb 75%,
      #ab79d6 90%
    );
    border-style: solid;
    border-width: 0;
    border-top-width: 0.25rem;
    padding-bottom: 4vh;
    padding-top: 4vh;


    // 项目容器
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 25ch), 1fr));
      gap: 1.5rem 2rem;
      margin-top: 8vh;

      background: rebeccapurple;

      // 项目
      .card {
        display: inherit;
        background: #d367c1;
        grid-template-rows: subgrid;
        grid-row: span 7;
        row-gap: 0.5rem;
        grid-template-columns: 1.5rem 1fr 1.5rem;
      }
    }

    ul {
      list-style: none outside none;
    }
    h2 {
      font-size: clamp(1.85rem, 1rem + 5vw, 3rem);
      color: #d367c1;
      font-weight: 500;
    }

    .link {
      align-items: center;
      background-color: #ab79d6;
      border: 2px solid transparent;
      border-radius: 0.5em;
      color: #351d4a;
      cursor: pointer;
      display: inline-flex;
      font-weight: 500;
      justify-content: center;
      line-height: calc(4px + 2ex);
      min-width: 10ch;
      padding: 0.55em 0.75em 0.5em;
      text-align: center;
      text-decoration: none;
      transition: none 0.18s ease-in-out;
      transition-property: background-color,color, border-color;

      &:focus {
        box-shadow: 0 0 0 max(0.15em, 2px) #351d4a, 0 0 0 max(0.3em, 2px) #ab79d6;
        outline-offset: max(2px, 0.08em)
      }

      &:active, &:hover {
        background-color: #351d4a;
        color: #ab79d6;
        border-color: currentColor;
      }
    }
  }
}
</style>
